<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>新的模板</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">

    <!--
        v-for 指令
            1.用于展示列表数据
            2.语法：v-for="(item, index) in xxx" :key="yyy"
            3.可遍历： 数组/、对象、字符串、指定次数
     -->

    <!-- 遍历数组 -->
    <h2>人员列表</h2>
    <ul>
        <li v-for="(person, index) in persons" :key="person.id">
            {{person.name}}-{{person.name}}-{{index}}
        </li>
    </ul>
    <!-- 遍历对象 -->
    <h2>汽车信息</h2>
    <ul>
        <li v-for="(value, k) in car" :key="k">
            {{k}}-{{value}}
        </li>
    </ul>
    <!-- 遍历字符串 -->
    <h2>遍历字符串(少用)</h2>
    <ul>
        <li v-for="(char, index) in str" :key="index">
            {{char}}-{{index}}
        </li>
    </ul>
    <!-- 遍历指定次数 -->
    <h2>遍历指定次数(少用)</h2>
    <ul>
        <li v-for="(number, index) in 5" :key="index">
            {{number}}-{{index}}
        </li>
    </ul>


</div>

<script type="text/javascript">
    Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。

    new Vue({
        el: '#root'
        , data: {
            persons: [
                {id: '001', name: '张三', age: 18}
                , {id: '002', name: '张四', age: 19}
                , {id: '003', name: '张五', age: 20}
                , {id: '004', name: '张六', age: 21}
            ],
            car: {
                name: '奥迪A8',
                price: '70W',
                color: '黑色'
            },
            str: 'Hello'
        }
    })

</script>
</body>
</html>
